import {Anchor, Col, Row} from "antd";
import React from "react";

function CcAnchor(){
    const items = [
        {
            key:"part-1",
            href:"#part-1",
            title:"part1"
        },
        {
            key:"part-2",
            href:"#part-2",
            title:"part2"
        },
        {
            key:"part-3",
            href:"#part-3",
            title:"part3",
            children:[
                {
                    key:5,
                    href:"#anchor-props",
                    title:<div style={{color:"red"}}>anchor-props</div>
                }
            ]
        }
    ]
    const handleClick = (e:React.MouseEvent<HTMLElement>,link:{
        title:React.ReactNode,
        href:string
    })=>{
        e.preventDefault()
        console.log(e,"e")
    }

    const handleChange =(link)=>{
        console.log(link,"link")
    }

    return (
        <div>
            <Row>
                <Col span={16}>
                    <div id="part-1" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />
                    <div id="part-2" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />
                    <div id="part-3" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />
                    <div id="anchor-props"  style={{ height: '100vh', background: 'red' }} />
                </Col>

                <Col span={8}>
                    {/*<Anchor items={}*/}
                    {/*<Anchor items={items} affix={false}  onClick={handleClick} getCurrentAnchor={()=>("#part-3")}/>*/}

                    <Anchor replace items={items} targetOffset={200} onChange={handleChange}/>
                </Col>
            </Row>

        </div>
    )
}

export default CcAnchor
